<template>
	<van-tabs class="titleBar" v-model="current" @change="onChange">
		<van-tab v-for="item of titleBar" :key="item.id" :title="item.mallSubName">
			<div class="list">
				<div class="list-item" v-for="item of list" :key="item.id">
					<van-image class="img" :src="item.pictureComperssPath" />
					<div class="item-content">
						<p class="name">{{item.name}}</p>
						<p class="price">{{item.presentPrice | toFixed | rmb}}({{item.oriPrice | toFixed | rmb}})</p>
					</div>
				</div>
			</div>
		</van-tab>
	</van-tabs>
</template>

<script>
	export default{
		props:{
			titleBar:{
				type:Array,
				required:true
			},
			titleBarCurrent:{
				type:Number,
				default:0
			},
			list:{
				type:Array,
				required:true
			}
		},
		data(){
			return{
				current:this.titleBarCurrent
			}
		},
		methods:{
			onChange(idx){
				this.$emit("update:titleBarCurrent",idx)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.titleBar {
		// flex: 1;
		width: 285px;
		.list{
			.list-item{
				height: 100px;
				display: flex;
				.img{
					width: 100px;
					height: 100px;
				}
				.item-content{
					flex: 1;
				}
			}
		}
	}
</style>
